<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sekiro.css">
</head>
<body>
    <main>
        <!-- 开场描述 -->
        <div class="introduce">
            <h3>犹豫</h3>
            <h3>就会败北</h3>
        </div>
        <!-- 轮播图 -->
        <div class="banner">
            <!-- 图片盒子 -->
            <ul class="img-box">
                <li class="wrap"><img src="./img/sekiro/three.jpg" alt=""></li>
                <li class="wrap"><img src="./img/sekiro/four.jpg" alt=""></li>
                <li class="wrap"><img src="./img/sekiro/five.jpg" alt=""></li>
                <li class="wrap"><img src="./img/sekiro/six.jpg" alt=""></li>
                <li class="wrap"><img src="./img/sekiro/seven.jpg" alt=""></li>
            </ul>
            <!-- 圆点 -->
            <ul class="sel-box">
                <li data-index="0"></li>
                <li data-index="1"></li>
                <li data-index="2"></li>
                <li data-index="3"></li>
                <li data-index="4"></li>
            </ul>
            <!-- 左右箭头 -->
            <div class="left-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/></svg></div>
            <div class="right-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg></div>
        </div>
    </main>

    <script>
        let imgs = document.querySelector('img-box')
        let leftBtn = document.querySelector('.left-btn')
        let rightBtn = document.querySelector('.right-btn')

        leftBtn.addEventListener('click',()=>{
            imgs.style.left = ''
        })
    </script>
</body>
</html>